<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>工具条及验证展示</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.js" ></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
.defaultbar
	{
	    margin-top: 10px;
	    height: 5px;
	    background-color: #FFFFE0;
	    border: 1px solid #A9C9E2;
	    position: relative;
	    }
.defaultbar .jquery-completed
	{
	    height: 3px;
	    background-color: #7d9edb;
	    top: 1px;
	    left:1px;
	    position: absolute;
	    }
.defaultbar .jquery-jslider
	{
	    height: 15px;
	    background-color: #E6E6FA;
	    border: 1px solid #A5B6C8;
	    top: -6px;
	    display: block;
	    cursor: pointer;
	    position: absolute;
	    }
    </style>
  </head>
<script type="text/javascript">

     
			function noNumbers(e)
			{
				var keynum
				var keychar
				var numcheck
				//Jquery serialize
				$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
				var fields = $("select, :radio").serializeArray();
						jQuery.each( fields, function(i, field){
						    $("#results1").append(field.value + " ");
                 });
				resetQuery("form1");
				
				if(window.event) // IE
				  {
				  keynum = e.keyCode
				  }
				else if(e.which) // Netscape/Firefox/Opera
				  {
				  keynum = e.which
				  }
				
				keychar = String.fromCharCode(keynum);
				numcheck = /\d/;
				var c = !numcheck.test(keychar);
				return c;
			}
			
			$("#form1").bind("submit",function(e){
			     alert('a');
			     alert($(this).serializeJson());
			});
			
    	
	      /**  
     * 重置form表单  
     * @param formId  form的id
     * 有Bug   
     */    
    function resetQuery(formId){    
        var fid = "#" + formId;    
        var str = $(fid).serialize();    
        //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04    
        var ob= strToObj(str);    
        //alert(ob);//2012-02-01    
    }    
        
    function strToObj(str){    
        str = str.replace(/&/g,"','");    
        str = str.replace(/=/g,"':'");    
        str = "({'"+str +"'})";    
        obj = eval(str);     
        return obj;    
    }		
			
	
    
    /**
    *先用serializeArray序列化为数组，再封装为Json对象
    *
    */
    (function($){  
        $.fn.serializeJson=function(){  
            var serializeObj={};  
            $(this.serializeArray()).each(function(){  
                serializeObj[this.name]=this.value;  
            });  
            return serializeObj;  
        };  
    })(jQuery); 
    
</script>
  <body>
  <div class="defaultbar">
  <div class="jquery-completed"> </div>
  <div class="jquery-jslider"> </div>
</div><br><br/><br/>
<form id="form1">
   <input type="text" onkeydown="return noNumbers(event)" />
   
   <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple" >
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
  <input type="submit" name="a" value="提交"/>
</form>
<br/><br/>
<p id="results"><b>Results: </b> </p><br/><br/>
<p id="results1"><b>Results: </b> </p><br/>
<p id="results2"><b>Results: </b> </p><br/>
<p id="results3"><b>Results: </b> </p>
  </body>
</html>
